<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="12" class="mb20">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="工作开始时间" prop="workStartTime">
        <el-input v-model="form.workStartTime" placeholder="请输入工作开始时间"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="工作结束时间" prop="workEndTime">
        <el-input v-model="form.workEndTime" placeholder="请输入工作结束时间"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="班次" prop="classesId">
        <el-input v-model="form.classesId" placeholder="请输入班次"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="班组" prop="groupId">
        <el-input v-model="form.groupId" placeholder="请输入班组"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="规则" prop="ruleId">
        <el-input v-model="form.ruleId" placeholder="请输入规则"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡1" prop="signOne">
        <el-input v-model="form.signOne" placeholder="请输入卡1"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡2" prop="signTwo">
        <el-input v-model="form.signTwo" placeholder="请输入卡2"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡3" prop="signThree">
        <el-input v-model="form.signThree" placeholder="请输入卡3"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡4" prop="signFour">
        <el-input v-model="form.signFour" placeholder="请输入卡4"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡5" prop="signFive">
        <el-input v-model="form.signFive" placeholder="请输入卡5"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="卡6" prop="signSix">
        <el-input v-model="form.signSix" placeholder="请输入卡6"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="应出勤班数" prop="shouldAttendanceClasses">
        <el-input v-model="form.shouldAttendanceClasses" placeholder="请输入应出勤班数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="出勤班数" prop="attendanceClass">
        <el-input v-model="form.attendanceClass" placeholder="请输入出勤班数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="出勤天数" prop="attendanceDays">
        <el-input v-model="form.attendanceDays" placeholder="请输入出勤天数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="迟到次数" prop="numberOfLatencies">
        <el-input v-model="form.numberOfLatencies" placeholder="请输入迟到次数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="早退次数" prop="numberOfEarlyDepartures">
        <el-input v-model="form.numberOfEarlyDepartures" placeholder="请输入早退次数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="旷工次数" prop="numberOfAbsenteeismClasses">
        <el-input v-model="form.numberOfAbsenteeismClasses" placeholder="请输入旷工次数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="值班个数" prop="numberOfShifts">
        <el-input v-model="form.numberOfShifts" placeholder="请输入值班个数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="迟到时长" prop="timeOfLatencies">
        <el-input v-model="form.timeOfLatencies" placeholder="请输入迟到时长"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="早退时长" prop="timeOfEarlyDepartures">
        <el-input v-model="form.timeOfEarlyDepartures" placeholder="请输入早退时长"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="旷工时长" prop="timeOfAbsenteeism">
        <el-input v-model="form.timeOfAbsenteeism" placeholder="请输入旷工时长"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="应出勤工时" prop="shouldAttendanceTime">
        <el-input v-model="form.shouldAttendanceTime" placeholder="请输入应出勤工时"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="出勤工时" prop="attendanceTime">
        <el-input v-model="form.attendanceTime" placeholder="请输入出勤工时"/>
      </el-form-item>
      </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="WorkSchedulingDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/personnel/workScheduling'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
		id:'',
	  username: '',
	  workStartTime: '',
	  workEndTime: '',
	  classesId: '',
	  groupId: '',
	  ruleId: '',
	  remark: '',
	  signOne: '',
	  signTwo: '',
	  signThree: '',
	  signFour: '',
	  signFive: '',
	  signSix: '',
	  shouldAttendanceClasses: '',
	  attendanceClass: '',
	  attendanceDays: '',
	  numberOfLatencies: '',
	  numberOfEarlyDepartures: '',
	  numberOfAbsenteeismClasses: '',
	  numberOfShifts: '',
	  timeOfLatencies: '',
	  timeOfEarlyDepartures: '',
	  timeOfAbsenteeism: '',
	  shouldAttendanceTime: '',
	  attendanceTime: '',
});

// 定义校验规则
const dataRules = ref({
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        workStartTime: [{required: true, message: '工作开始时间不能为空', trigger: 'blur'}],
        workEndTime: [{required: true, message: '工作结束时间不能为空', trigger: 'blur'}],
        classesId: [{required: true, message: '班次不能为空', trigger: 'blur'}],
        groupId: [{required: true, message: '班组不能为空', trigger: 'blur'}],
        ruleId: [{required: true, message: '规则不能为空', trigger: 'blur'}],
        remark: [{required: true, message: '备注不能为空', trigger: 'blur'}],
        signOne: [{required: true, message: '卡1不能为空', trigger: 'blur'}],
        signTwo: [{required: true, message: '卡2不能为空', trigger: 'blur'}],
        signThree: [{required: true, message: '卡3不能为空', trigger: 'blur'}],
        signFour: [{required: true, message: '卡4不能为空', trigger: 'blur'}],
        signFive: [{required: true, message: '卡5不能为空', trigger: 'blur'}],
        signSix: [{required: true, message: '卡6不能为空', trigger: 'blur'}],
        shouldAttendanceClasses: [{required: true, message: '应出勤班数不能为空', trigger: 'blur'}],
        attendanceClass: [{required: true, message: '出勤班数不能为空', trigger: 'blur'}],
        attendanceDays: [{required: true, message: '出勤天数不能为空', trigger: 'blur'}],
        numberOfLatencies: [{required: true, message: '迟到次数不能为空', trigger: 'blur'}],
        numberOfEarlyDepartures: [{required: true, message: '早退次数不能为空', trigger: 'blur'}],
        numberOfAbsenteeismClasses: [{required: true, message: '旷工次数不能为空', trigger: 'blur'}],
        numberOfShifts: [{required: true, message: '值班个数不能为空', trigger: 'blur'}],
        timeOfLatencies: [{required: true, message: '迟到时长不能为空', trigger: 'blur'}],
        timeOfEarlyDepartures: [{required: true, message: '早退时长不能为空', trigger: 'blur'}],
        timeOfAbsenteeism: [{required: true, message: '旷工时长不能为空', trigger: 'blur'}],
        shouldAttendanceTime: [{required: true, message: '应出勤工时不能为空', trigger: 'blur'}],
        attendanceTime: [{required: true, message: '出勤工时不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取workScheduling信息
  if (id) {
    form.id = id
    getworkSchedulingData(id)
  }
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getworkSchedulingData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>